<template>
	<view class="container">
		<!-- <view class="left-bottom-sign"></view>
		<view class="back-btn yticon icon-zuojiantou-up" @click="navBack"></view>
		<view class="right-top-sign"></view> -->
		<!-- 设置白色背景防止软键盘把下部绝对定位元素顶上来盖住输入框等 -->
		<view class="wrapper">
			<!-- <view class="left-top-sign">LOGIN</view> -->
			<!-- <view class="welcome">
				欢迎回来！
			</view> -->
			<view class="input-content">
				<view class="input-wrapper">
					<view class="input-item">
						<text class="tit">Full Name</text>
						<input 
							type="text" 
							:value="mobile" 
							placeholder="Type your Full Name"
							maxlength="11"
							data-key="mobile"
							@input="inputChange"
						/>
					</view>
					<image class="input-check" v-if="showCheckImg_mobile" src="../../static/images/Check-input.png"></image>
				</view>
				<view class="input-wrapper">
					<view class="input-item">
						<text class="tit">Password</text>
						<input 
							type="text" 
							value="" 
							placeholder="Type your Password"
							placeholder-class="input-empty"
							maxlength="20"
							password 
							data-key="password"
							@input="inputChange"
							@confirm="toLogin"
						/>
					</view>
					<image class="input-check" v-if="showCheckImg_password" src="../../static/images/Check-input.png"></image>
				</view>
			</view>
			<view class="forget-section">
				Forgot Password?
			</view>
			<button class="confirm-btn" @click="toLogin" :disabled="logining" :loading="logining">Login</button>
			<view class="register-section">
				<text @click="toRegist">CREATE AN ACCOUNT</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {  
        mapMutations,
		mapState
    } from 'vuex';
	import { jumpBackPage } from '@/config/mixins.js';
	
	export default{
		mixins: [jumpBackPage],
		data(){
			return {
				mobile: '',
				password: '',
				logining: false,
				showCheckImg_mobile: false,
				showCheckImg_password: false
			}
		},
		onLoad(){
			
		},
		computed: {
			...mapState(['hasAgreeTerms'])
		},
		methods: {
			...mapMutations(['login']),
			inputChange(e){
				const key = e.currentTarget.dataset.key;
				this[key] = e.detail.value;
				if (e.detail.value.length > 0) {
				    this['showCheckImg_' + key] = true;
				} else {
				    this['showCheckImg_' + key] = false;
				}
			},
			navBack(){
				uni.navigateBack();
			},
			toRegist(){
				this.$common.navigateTo('register/register1');
			},
			// 合法性校验
			checkInput() {
				let res = {};
				if (!this.mobile) {
					res.status = false;
					res.msg = 'Please enter the Full Name';
				} else if (!this.password) {
					res.status = false;
					res.msg = 'Please enter the password';
				} else {
					res.status = true;
				}
				return res;
			},
			async toLogin(){
				if(!this.checkInput().status) {
					this.$common.errorToShow(this.checkInput().msg);
					return;
				}
				this.logining = true;
				const sendData = {
					username: this.mobile,
					password: this.password
				};
				
				let _this = this
				
				this.$api.login(sendData, res => {
					if(res.code === 1) {
						_this.$db.set('userToken', res.data.token);
						_this.login(res.data);
						// if(_this.$db.get('hasAgreeTerms')) {
						// 	_this.redirectHandler();
						// } else {
							_this.redirectHandler();
							// _this.$common.redirectTo('./register/terms')
						// }
					} else {
						_this.$common.errorToShow(res.msg)
						_this.logining = false
					}
				})
				// const result = await this.$api.json('userInfo');
				// if(result.status === 1){
				// 	this.login(result.data);
				//	this.redirectHandler();
				// }else{
				// 	this.$common.successToShow(result.msg);
				// 	this.logining = false;
				// }
			},
			// 重定向跳转 或者返回上一个页面
			redirectHandler() {
				this.handleBack();
			}
		},

	}
</script>

<style lang='scss'>
	page{
		background: #fff;
	}
	.container{
		position:relative;
		overflow: hidden;
		background: #fff;
	}
	.wrapper{
		margin-top: 115rpx;
		position:relative;
		z-index: 90;
		background: #fff;
		padding-bottom: 40upx;
	}
	.back-btn{
		position:absolute;
		left: 40upx;
		z-index: 9999;
		padding-top: var(--status-bar-height);
		top: 40upx;
		font-size: 40upx;
		color: $font-color-dark;
	}
	.left-top-sign{
		font-size: 120upx;
		color: $page-color-base;
		position:relative;
		left: -16upx;
	}
	.right-top-sign{
		position:absolute;
		top: 80upx;
		right: -30upx;
		z-index: 95;
		&:before, &:after{
			display:block;
			content:"";
			width: 400upx;
			height: 80upx;
			background: #b4f3e2;
		}
		&:before{
			transform: rotate(50deg);
			border-radius: 0 50px 0 0;
		}
		&:after{
			position: absolute;
			right: -198upx;
			top: 0;
			transform: rotate(-50deg);
			border-radius: 50px 0 0 0;
			/* background: pink; */
		}
	}
	.left-bottom-sign{
		position:absolute;
		left: -270upx;
		bottom: -320upx;
		border: 100upx solid #d0d1fd;
		border-radius: 50%;
		padding: 180upx;
	}
	.welcome{
		position:relative;
		left: 50upx;
		top: -90upx;
		font-size: 46upx;
		color: #555;
		text-shadow: 1px 0px 1px rgba(0,0,0,.3);
	}
	.input-content{
		padding: 0 30rpx;
		.input-wrapper {
			display:flex;
			flex-direction: row;
			flex-wrap: nowrap;
			padding: 0 0 0 30upx;
			height: 110upx;
			border-radius: 4px;
			margin-bottom: 50upx;
			border: 2rpx solid #D8D8D8;
			.input-check {
				height: 110upx;
				width: 110upx;
				padding: 22rpx;
			}
			.input-item{
				display:flex;
				flex-direction: column;
				align-items:flex-start;
				justify-content: center;
				flex: 1;
				&:last-child{
					margin-bottom: 0;
				}
				.tit{
					height: 50upx;
					line-height: 56upx;
					font-size: $font-sm+2upx;
					color: #8A8A8A;
				}
				input{
					height: 60upx;
					font-size: $font-base + 2upx;
					color: $font-color-dark;
					width: 100%;
				}
			}
		}
	}

	.confirm-btn{
		width: 700upx;
		height: 100upx;
		line-height: 100upx;
		border-radius: 10rpx;
		margin-top: 30upx;
		background: #4666D5;
		color: #fff;
		font-size: $font-lg;
		/* &:after{
			border-radius: 100px;
		} */
	}
	.forget-section{
		font-size: $font-sm+2upx;
		color: #1C1C1C;
		text-align: right;
		margin-top: 40upx;
		padding: 0 30rpx;
	}
	.register-section{
		margin-top: 40upx;
		padding: 0 30rpx;
		width: 100%;
		text-align: right;
		text {
			font-size: $font-sm+2upx;
			color: #EB658D;
		}
	}
</style>
